<template>
  <div class="search">
    <van-search
      v-model="search"
      placeholder="请输入搜索关键词"
      @search="searchBtn"
    />
    <my-history v-if="list.length==0" @checkItem="checkItem"></my-history>
    <div class="search_count">
       <my-good v-for="(item,index) in list" :key="index" :itemObj="item" @click="$router.push(`/detail/${item.product_id}`)"></my-good>
       <van-empty v-if="list.length==0" description="暂无搜索数据" />
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import api from "../api/index";
import myGood from '../components/myGood.vue';
import MyHistory from '../components/myHistory.vue';
import { useStore } from 'vuex';
export default {
  components: { myGood, MyHistory },
  setup() {
    const store = useStore();
    const search = ref(search);
    const data = reactive({
      list: [], // 搜索的结果值
    });
    const searchBtn = () => {
      api
        .post("/product/getProductBySearch", { search: search.value })
        .then((res) => {
          data.list = res.Product;
          if (search.value){
            store.commit('addHistory', search.value);
          }
        });
    };
    const checkItem = (val) => {
        search.value = val
        searchBtn();
    }
    return {
      search,
      searchBtn,
      ...toRefs(data),
      checkItem
    };
  },
};
</script>
<style lang="scss" scoped>
.search_count {
  height: calc(100% - 54px);
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  justify-content: space-between;
}
:deep(.van-empty){
    width: 100%;
}
</style>